<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
  }
  li {
    list-style-type: none;
  }

  .box{
    width: 250px;
    margin: 100px auto;
  }

  .box li{
    float: left;
    width: 24px;
    height: 24px;
    margin: 15px;
    background: url("../../images/sprite.png");
  }
</style>
<body>
<div class="box">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
<script>
  var lis = document.querySelectorAll('li');

  for(var i = 0; i < lis.length; i++){
    lis[i].style.backgroundPositionY = '-' + i * 44 + 'px';
  }
</script>
</body>
</html>